讲解尺规作正十七边形原理的博客多如牛毛，这里就不赘述了。我们用 JSXGraph 实现一种最经典的作法：

展示

源代码

/* 初始化画板 */
var brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-11,11,13,-13], axis:false, grid:false, keepaspectratio: true, showCopyright:false});
brd.options.point.size = 2;
brd.options.point.color = 'blue';
brd.options.line.strokeColor = '#aaa';
brd.options.circle.strokeColor = '#aaa';
/* 基本框架 */
var A   = brd.create('point', [0,0], {name:'A'});
var B   = brd.create('point', [6,0], {name:'B'});
var a   = brd.create('line', [A,B], {straightFirst:false, straightLast:false});
var _a  = brd.create('circle', [A,B]);
var _b  = brd.create('circle', [B,A]);
var C   = brd.create('intersection', [_a,_b,0], {name:'C'});
var D   = brd.create('intersection', [_a,_b,1], {name:'D'});
var b   = brd.create('line', [C,D], {straightFirst:false, straightLast:false});
var E   = brd.create('intersection', [a,b], {name:'E'});
var _c  = brd.create('circle', [E,A]);
var F   = brd.create('intersection', [_c,b,0], {name:'F'});
/* 四等分点 */
var _d  = brd.create('circle', [F,E]);
var G   = brd.create('intersection', [_d,_c,0], {name:'G'});
var H   = brd.create('intersection', [_d,_c,1], {name:'H'});
var c   = brd.create('line', [G,H], {straightFirst:false, straightLast:false});
var I   = brd.create('intersection', [c,b], {name:'I'});
var _e  = brd.create('circle', [I,E]);
var _f  = brd.create('circle', [E,I]);
var J   = brd.create('intersection', [_e,_f,0], {name:'J'});
var K   = brd.create('intersection', [_e,_f,1], {name:'K'});
var d   = brd.create('line', [J,K], {straightFirst:false, straightLast:false});
var L   = brd.create('intersection', [d,b], {name:'L'});
/* 四等分角 */
var e   = brd.create('line', [L,B], {straightFirst:false, straightLast:false}); // 实际上用不到这条线
var _g  = brd.create('circle', [L,B]);
var M   = brd.create('intersection', [_g,b,1], {name:'M'});
var _h  = brd.create('circle', [M,B]);
var _i  = brd.create('circle', [B,M]);
var N   = brd.create('intersection', [_h,_i,0], {name:'N'});
var _j  = brd.create('circle', [L,N]);
var O   = brd.create('intersection', [_j,b,1], {name:'O'});
var _k  = brd.create('circle', [O,N]);
var _l  = brd.create('circle', [N,O]);
var P   = brd.create('intersection', [_k,_l,0], {name:'P'});
var f   = brd.create('line', [L,P], {straightLast:false});
var Q   = brd.create('intersection', [f,a], {name:'Q'});
/* 45度角 */
var R   = brd.create('intersection', [_g,f,0], {name:'R'});
var S   = brd.create('intersection', [_g,f,1], {name:'S'});
var _m  = brd.create('circle', [R,S]);
var _n  = brd.create('circle', [S,R]);
var T   = brd.create('intersection', [_m,_n,1], {name:'T'});
var _o  = brd.create('circle', [L,T]);
var U   = brd.create('intersection', [_o,f,0], {name:'U'});
var _p  = brd.create('circle', [T,U]);
var _q  = brd.create('circle', [U,T]);
var V   = brd.create('intersection', [_p,_q,0], {name:'V'});
var g   = brd.create('line', [L,V], {straightFirst:false, straightLast:false});
var W   = brd.create('intersection', [g,a], {name:'W'});
/* 第四个顶点 */
var _r  = brd.create('circle', [W,B]);
var _s  = brd.create('circle', [B,W]);
var X   = brd.create('intersection', [_r,_s,0], {name:'X'});
var Y   = brd.create('intersection', [_r,_s,1], {name:'Y'});
var h   = brd.create('line', [X,Y], {straightFirst:false, straightLast:false});
var Z   = brd.create('intersection', [h,a], {name:'Z'});
var _t  = brd.create('circle', [Z,W]);
var A1  = brd.create('intersection', [_t,b,0], {name:'A1'});
var _u  = brd.create('circle', [Q,A1]);
var B1  = brd.create('intersection', [_u,a,0], {name:'B1'});
var _v  = brd.create('circle', [B1,E]);
var C1  = brd.create('intersection', [_v,a,0], {name:'C1'});
var _w  = brd.create('circle', [C1,E]);
var _x  = brd.create('circle', [E,C1]);
var D1  = brd.create('intersection', [_w,_x,0], {name:'D1'});
var i   = brd.create('line', [B1,D1], {straightFirst:false});
var _P = [];
var _C = [];
_P[0] = brd.create('intersection', [i,_c,0], {name:'P0'});
_C[0] = brd.create('circle', [_P[0],B]);
/* 其他点 */
for(var idx = 1; idx < 17; idx++) {
    _P[idx] = brd.create('intersection', [_C[idx-1],_c,0], {name:'P'+idx});
    _C[idx] = brd.create('circle', [_P[idx],_P[idx-1]]);
}
/* 连线 */
_L = [];
for(var idx = 0; idx < 17; idx++) {
    _L[idx] = brd.create('line', [_P[idx],_P[(idx+6)%17]], {straightFirst:false, straightLast:false});
}